<template>
  <div
    class="guestbook-page"
    :class="{
      mobile: isMobile,
      dark: isDarkTheme
    }"
  >
    <div class="banner">
      <uimage cdn class="image" src="/images/page-guestbook/banner.jpg" />
      <span class="slogan">
        <span class="text">
          <i18n :lkey="LANGUAGE_KEYS.GUESTBOOK_SLOGAN" />
        </span>
      </span>
    </div>
    <div class="comment">
      <comment :post-id="0" :likes="siteLikes" />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  import { useEnhancer } from '/@/app/enhancer'
  import { isClient } from '/@/app/environment'
  import { useUniversalFetch } from '/@/universal'
  import { useMetaStore } from '/@/store/meta'
  import { useCommentStore } from '/@/store/comment'
  import { firstUpperCase } from '/@/transforms/text'
  import { Language } from '/@/language/data'
  import { LANGUAGE_KEYS } from '/@/language/key'
  import Comment from '/@/components/comment/index.vue'
  import { META } from '/@/config/app.config'

  export default defineComponent({
    name: 'GuestbookPage',
    components: {
      Comment
    },
    setup() {
      const { i18n, meta, isMobile, isDarkTheme, isZhLang } = useEnhancer()
      const metaStore = useMetaStore()
      const commentStore = useCommentStore()
      const siteLikes = computed(() => metaStore.appOptions.data?.meta.likes || 0)

      meta(() => {
        const enTitle = firstUpperCase(i18n.t(LANGUAGE_KEYS.PAGE_GUESTBOOK, Language.En)!)
        const titles = isZhLang.value ? [i18n.t(LANGUAGE_KEYS.PAGE_GUESTBOOK), enTitle] : [enTitle]
        return { pageTitle: titles.join(' | '), description: `给 ${META.author} 留言` }
      })

      const fetchAllData = () => {
        return Promise.all([
          metaStore.fetchAppOptions(true),
          commentStore.fetchList({
            post_id: 0,
            delay: isClient ? 368 : 0
          })
        ])
      }

      useUniversalFetch(() => fetchAllData())

      return {
        LANGUAGE_KEYS,
        isMobile,
        isDarkTheme,
        siteLikes
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import 'src/styles/init.scss';

  .guestbook-page {
    .banner {
      position: relative;
      overflow: hidden;
      margin-bottom: $lg-gap;
      width: 100%;
      height: 19rem;
      border: 0;
      background-color: $module-bg;
      @include radius-box($lg-radius);

      .image {
        margin-top: -($gap * 6);
        transition: all $transition-time-slow;

        &:hover {
          transform: rotate(2deg) scale(1.1);
        }
      }

      .slogan {
        $size: 2em;
        display: block;
        position: absolute;
        right: $lg-gap * 2;
        bottom: $lg-gap * 2;
        height: $size;
        line-height: $size;
        padding: 0 $sm-gap;
        padding-left: 3rem;
        opacity: 0.8;
        font-weight: 700;
        color: $body-bg;
        cursor: progress;
        background: linear-gradient(to left, $module-bg-lighter, $module-bg, transparent);

        .text {
          letter-spacing: 0.3px;
          font-weight: bold;
          color: $text;
          background-clip: text;
          background-image: cdn-url('/images/page-guestbook/banner.jpg');
          background-position: 100% 80%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    &.dark {
      .banner {
        .slogan {
          .text {
            -webkit-text-fill-color: $text !important;
          }
        }
      }
    }

    &.mobile {
      .banner {
        height: 12rem;
      }
    }
  }
</style>
